<template>
<el-container>
  <el-header>
    <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="/recycle">回收站</a></el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-row :gutter="10">
      <el-col :span="3">
      <el-button round type="primary" @click="handleClearTrash">清空回收站</el-button>
      </el-col>
    </el-row>
    <!-- 搜索项目并排序 -->
    <br>
    <el-row :gutter="10" class="secondRow">
      <el-col :span="9" :offset="0">
        <!-- <el-input
          placeholder="搜索团队"
          prefix-icon="el-icon-circle-plus-outline"
          v-model="searchName"
        >
        </el-input> -->
        <el-input placeholder="搜索回收站项目" v-model="searchName" class="input-with-select" clearable @clear='getTrashList'>
          <el-button slot="append" type="info" plain icon="el-icon-search" @click="getTrashList"></el-button>
        </el-input>
      </el-col>
      <el-col :span="5" :offset="1">
        <!-- <el-button type="primary" @click="createGroup">创建团队</el-button> -->
        <el-select v-model="sort" placeholder="选择排序方式">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="getTrashList" width="100">进行排序</el-button>
      </el-col>
    </el-row>
  </el-header>

  <el-main>
  <h1>回收站项目</h1>

    <el-table :data="trashProList" border stripe height="500px">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="项目名称" prop="proname"></el-table-column>
      <el-table-column label="创建时间" prop="prosettime"></el-table-column>
      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="恢复项目" placement="top" :enterable="false" >
            <el-button type="primary" icon="el-icon-right" size="small" round @click="backProject(scope.row.token)"></el-button>
          </el-tooltip>


          <!-- <el-tooltip  effect="dark" content="重命名" placement="top" :enterable="false" >
            <el-button type="info" plain icon="el-icon-edit" size="small" round @click="renameProject(scope.row.token)"></el-button>
          </el-tooltip> -->


          <el-tooltip effect="dark" content="清除项目" placement="top" :enterable="false">
          <el-button type="danger" icon="el-icon-close" size="small" round @click="handleClearProject(scope.row.token, scope.row.proname)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </el-main>
  

</el-container>
</template>

<script>
import qs from 'qs';
export default {
  data(){
    return{
      //回收站项目列表
      trashProList: [],
      //搜索项目名称
      searchName: "",
      //选择器备选排序方式
      options: [{
          value: 'name',
          label: '项目名称'
        }, {
          value: 'time',
          label: '创建时间'
        }],
      //选择器中的值（排序选项）
      sort: '',
    }
  },

  created(){
    this.getTrashList();
  },

  methods:{
    //清空回收站
    clearTrash(){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      //console.log(this.usertoken);
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/trashbin/clear" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          this.getTrashList();
        }
      });
    },

    //获取回收站项目列表
    getTrashList(){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      //console.log(this.usertoken);
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/trashbin/list" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          usertoken: usertoken,
          teamtoken: teamtoken,
          sort: this.sort,
          search: this.searchName,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.trashProList = res.data.message;
        }
      });
    },

    //从回收站恢复项目
    backProject(token){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/trashbin/back" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          protoken: token,
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          //回收项目后刷新项目列表
          this.getTrashList();
        }
      });
    },

    //在回收站清除某个项目
    clearProject(token){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/trashbin/drop" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          protoken: token,
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          //清除项目后刷新项目列表
          this.getTrashList();
        }
      });
    },

    //弹出对话框，确认是否清空回收站
    handleClearTrash() {
      this.$confirm('您确认要清空回收站吗？')
        .then(_ => {
          this.clearTrash();
        })
        .catch(_ => {});
    },

    //弹出对话框，确认是否永远清除该项目
    handleClearProject(token, proname) {
      this.$confirm('您确认要将项目: ' + proname + ' 永久删除吗？')
        .then(_ => {
          this.clearProject(token);
        })
        .catch(_ => {});
    }

  },

}
</script>



<style>
h1{
  text-align: left;
}
</style>


